<template>
    <el-row class="lives-news">
        <el-row>
            <el-col class="title">
                <h3>业务员管理</h3>
            </el-col>
        </el-row>
        <el-row class="search-row">
            <el-form class="inline-form" :inline="true">
                <el-form-item>
                    <el-button type="primary" @click="showAddDialog()"><i class="el-icon-plus el-icon--left"></i>添加业务员</el-button>
                </el-form-item>
                <el-form-item label="搜索业务员">
                    <el-input placeholder="请输入业务员名字" class="search-input" icon="search" v-model="merchandiserNameLike" :on-icon-click="searchSalesman">
                    </el-input>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-col>
                <el-table :data="salesmanList">
                    <el-table-column label="业务员工号" align="center">
                        <template slot-scope="scope">{{scope.row.merchandiserId}}</template>
                    </el-table-column>
                    <el-table-column label="业务员名字" align="center">
                        <template slot-scope="scope">{{scope.row.merchandiserName}}</template>
                    </el-table-column>
                    <!--<el-table-column label="代理商ID" align="center">-->
                        <!--<template slot-scope="scope">{{scope.row.agentId}}</template>-->
                    <!--</el-table-column>-->
                    <el-table-column label="操作" width="180px" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" @click="getSalesman(scope.$index, scope.row)">修改</el-button>
                            <!--<el-button size="small" type="primary" @click="showSalesmanInfo(scope.$index, scope.row)">查看详情</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-dialog :visible.sync="addDialog" title="新增业务员" size="tiny" @close="closeAddDialog" class="dialog">
                <el-form :model="formInline" label-width="100px">
                    <el-form-item label="业务员账号">
                        <el-input type="text" v-model="formInline.merchandiserName" auto-complete="off" placeholder="请输入业务员名字" @change="checkValue"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="text" v-model="formInline.secretkey" placeholder="请输入密码" @change="checkValue"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelAddSalesman">取 消</el-button>
                    <el-button type="primary" @click="toAddSalesman" :loading="addLoading">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog :visible.sync="updateDialog" title="修改业务员" size="tiny" @close="closeUpdateDialog" class="dialog">
                <el-form :model="formInline" label-width="100px">
                    <el-form-item label="业务员账号">
                        <el-input type="text" v-model="formInline.merchandiserName" auto-complete="off" placeholder="请输入业务员名字"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="text" v-model="formInline.secretkey" placeholder="不修改请留空"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelUpdateSalesman">取 消</el-button>
                    <el-button type="primary" @click="toUpdateSalesman" :loading="addLoading">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
        <el-row>
            <!-- 分页 -->
            <el-col class="pagination">
                <el-pagination @current-change="currentChange" :current-page="pageId" :page-size="pageSize" layout="total, prev, pager, next" :total="counts">
                </el-pagination>
            </el-col>
        </el-row>

    </el-row>
</template>
<script>
	import {
		SalesmanList,
		addSalesman,
		getSalesmanInfo,
		updateSalesman,
	} from '@/api/api'
	export default {
		data: function() {
			var that = this;
			return {
				addLoading: false,
				merchandiserId: '',
				agentId: '',
				merchandiserNameLike: '',
				pageId: 1,
				pageSize: 20,
				counts: 0,
				isAdd: true,
				salesmanList: null,
                salesmanDetail: null,
				addDialog: false,
				updateDialog: false,
				formInline:{
					agentId: that.agentId,
					merchandiserId: '',
					merchandiserName: "",
					secretkey: ""
				},
				canLogin: false
			}
		},
		created: function() {
			var agent = JSON.parse(sessionStorage.getItem('agent'));
			if(agent){
				this.formInline.agentId = agent.agentId;
            }
			this.pageId = parseInt(this.$route.query.page) || 1;
			this.getSalesmanLists();
		},
		methods: {
			//获取列表
			getSalesmanLists: function() {
				SalesmanList({ params: { pageId: this.pageId, pageSize: this.pageSize, merchandiserId: this.merchandiserId, agentId: this.agentId, merchandiserNameLike: this.merchandiserNameLike} }).then(data => {
					console.log(data);
					this.counts = data.count;
					this.salesmanList = data.list;
				})
			},
			//搜索
			searchSalesman: function() {
				this.getSalesmanLists();
			},
			showSalesmanInfo: function (index,row) {
				var merchandiserId = row.merchandiserId;
				this.$router.push('salesmanDetail?merchandiserId=' + merchandiserId);
			},
			getSalesman: function (index,row) {
				var merchandiserId = row.merchandiserId;
				this.merchandiserId = merchandiserId;
				getSalesmanInfo(merchandiserId).then(res => {
					this.formInline = res;
					console.log(res);
					this.updateDialog = true;
                })
			},
			toUpdateSalesman: function () {
				console.log(this.formInline);
	            if(this.formInline.merchandiserName) {
		            updateSalesman(this.merchandiserId, this.formInline).then(res => {
			            this.merchandiserId = '';
			            this.$message({
				            message: '修改成功',
				            type: 'success'
			            });
			            this.updateDialog = false;
			            this.getSalesmanLists();
		            })
	            }else{
		            this.$message({
			            message: '请输入业务员名字',
			            type: 'error'
		            });
                }
            },
			//显示添加弹窗
			showAddDialog: function() {
				this.addDialog = true;
			},
			//关闭添加弹窗
			closeAddDialog: function() {
				this.formInline = {
					agentId: 0,
					merchandiserId: 0,
					merchandiserName: "",
					secretkey: ""
				};
				this.addDialog = false;
			},
            closeUpdateDialog: function() {
				this.formInline = {
					agentId: 0,
					merchandiserId: 0,
					merchandiserName: "",
					secretkey: ""
				};
				this.updateDialog = false;
			},
			//开店
			toAddSalesman: function() {
				console.log(this.formInline);
				if(this.canLogin){
					addSalesman(this.formInline).then(data => {
						this.getSalesmanLists();
						this.$message({
							message: '添加成功',
							type: 'success'
						})
						this.addDialog = false;
					})
				}
			},
			//取消添加分类
			cancelAddSalesman: function() {
				this.addDialog = false;
			},
            cancelUpdateSalesman: function() {
				this.updateDialog = false;
			},
			checkValue: function(){
				if(this.formInline.merchandiserName && this.formInline.secretkey){
					this.canLogin = true;
                }else{
					this.canLogin = false;
                }
			},
			//分页
			currentChange: function(val) {
				this.$router.push('?page=' + val);
				this.pageId = val;
				this.getSalesmanLists();
			},
		}
	}
</script>
<style scoped lang="scss">
    .lives-news {
        .title {
            font-size: 12px;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 5px;
            h3 {
                display: inline-block;
                padding: 5px 0;
                margin: 0;
                font-weight: normal;
                color: #23b7e5;
                border-bottom: 1px solid #23b7e5;
            }
        }
        .logo-img{
            width: 120px;
        }
        .amap-demo {
            height: 500px;
        }

        .search-box {
            position: absolute;
            top: 25px;
            right: 20px;
        }

        .search-input{
            width: 200px;
            float: left;
            margin-right: 20px;
        }

        .amap-page-container {
            position: relative;
        }
        .el-table tr .el-button+.el-button{
            margin-left: 5px;
        }
        .el-pagination{
            margin-top: 5px;
        }
        .el-dialog--tiny {
            width: 25%;
        }
    }
</style>